<template>
  <Slot11>
    <template v-slot:header>
      <!--具名插槽-->
      我是标题
    </template>
    <!-- <span style="font-size: 2em;">我是内容</span> -->
    <template v-slot="{ data, index, item, i }"> <!--作用域插槽-->
      <span>{{ index }}. {{ data.content }}---------{{ i }}. {{ item.content }}</span>
    </template>
    <template #footer>我是注脚</template>
    <!--另一种具名插槽表现形式-->
  </Slot11>

  <Slot11>
    <template #[name]>  <!--动态插槽-->
      <span style="font-size: 3em;" @click="change">我是动态插槽</span>
    </template>
  </Slot11>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import Slot11 from './11插槽/index.vue'

const name = ref('header')
const change = () => {
  if (name.value === 'header') name.value = 'default'
  else if (name.value === 'default') name.value = 'footer'
  else name.value = 'header'
}

</script>

<style lang='scss' scoped>

</style>